<template>
	<view class="login">
		<view class="zyjz center mgn-t-50">
			<image src="../../static/logo.png" mode="widthFixw" style="width: 180rpx;height: 180rpx;">
			</image>
		</view>
		<view class="zyjz selector center mgn-t-20 mgn-b-40">
			<view class="selector-li left-radius  " style="padding: 15rpx 70rpx" :class="{active:loginType==='手机'}"
				@click="loginType = '手机'">
				手机登陆
			</view>
			<view class="selector-li right-radius" style="padding: 15rpx 70rpx" :class="{active:loginType==='账号'}"
				@click="loginType = '账号'">
				账号登陆
			</view>

		</view>
		<form @submit="formSubmit">
			<block v-if="loginType === '手机'">
				<view class="zyjz center border mgn-a pad-t-20 pad-b-20 pad-l-10 pad-r-10">
					<button class="zyjz center-c" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><uni-icons
							type="phone" size="14"></uni-icons>
						<text>{{form.userInfo.mobile_phone?form.userInfo.mobile_phone:'获取微信手机号码'}}</text></button>
					<!-- <input class="uni-input mgn-l-20" name="input" placeholder="获取微信手机号码" placeholder-class="f24 cld8d" /> -->
				</view>
				<view class="zyjz center border mgn-a pad-t-20 pad-b-20 pad-l-10 pad-r-10">
					<uni-icons type="person" size="18"></uni-icons>
					<input class="uni-input mgn-l-20" name="user_name" v-model="form.userInfo.user_name" placeholder="请输入真实姓名"
						placeholder-class="f24 cld8d" />
				</view>
				<view class="zyjz selector center mgn-t-80">
					<view class="selector-li left-radius " :class="{active:form.userInfo.type==='user'}"
						@click="form.userInfo.type = 'user'">
						用户
					</view>
					<view class="selector-li" :class="{active:form.userInfo.type==='team'}" @click="form.userInfo.type = 'team'">
						带班
					</view>
					<view class="selector-li right-radius" :class="{active:form.userInfo.type==='warehouse'}"
						@click="form.userInfo.type = 'warehouse'">
						仓管
					</view>
				</view>
				<view class="zyjz center w mgn-a  pad-t-30">
					<uni-data-select style="width: 100%;" v-model="form.userInfo.w_id" :localdata="warehouseList"
						placeholder="请选择仓库"></uni-data-select>
				</view>
				<view class="zyjz center w mgn-a  mgn-t-20" v-if="form.userInfo.type !=='warehouse'">
					<uni-data-select style="width: 100%;" v-model="form.userInfo.class_id" :localdata="calssList"
						placeholder="请选择班组"></uni-data-select>
				</view>
			</block>
			<block v-else>
				<view class="zyjz center border mgn-a pad-t-20 pad-b-20 pad-l-10 pad-r-10">
					<uni-icons type="person" size="18"></uni-icons>
					<input class="uni-input mgn-l-20" name="mobile_phone" placeholder="请输入账号" placeholder-class="f24 cld8d" />
				</view>
				<view class="zyjz center border mgn-a pad-t-20 pad-b-20 pad-l-10 pad-r-10">
					<uni-icons type="locked" size="18"></uni-icons>
					<input class="uni-input mgn-l-20" name="password" placeholder="请输入密码" placeholder-class="f24 cld8d"
						type="password" />
				</view>
			</block>
			<view class="zyjz center mgn-t-30">
				<button class="btn clfff f27" form-type="submit">确定</button>
			</view>
		</form>
	</view>
</template>

<script>
	const form = {
		userInfo: {
			type: '',
			class_id: '',
			w_id: '',
			user_name: '',
			mobile_phone: '',
			unionid: ''
		}
	}
	import mixins from '@/mixins/index.js'
	import business from '@/mixins/business.js'
	export default {
		mixins: [mixins, business],
		data() {
			return {
				wxData: {},
				form: JSON.parse(JSON.stringify(form)),
				loginType: '手机'
			};
		},
		created() {
			this.gogo()
		},
		onLoad(e) {
			// uni.scanCode({
			// 	scanType: ["qrCode"],
			// 	success: function(res) {
			// 		console.log(res);
			// 		console.log("条码类型：" + res.scanType);
			// 		console.log("条码内容：" + res.result);
			// 		uni.navigateTo({
			// 			url: "/pages/scan/scan",
			// 		});
			// 	},
			// });
			if (e && e.scene) {
				this.api.msg(decodeURIComponent(e.scene))
				this.form.userInfo.w_id = decodeURIComponent(e.scene)
			}
			this.getWarehouse(() => {
				for (let i in this.warehouseList) {
					this.$set(this.warehouseList[i], 'value', this.warehouseList[i].id)
				}
			})
			this.getCalss(() => {
				for (let i in this.calssList) {
					this.$set(this.calssList[i], 'value', this.calssList[i].id)
				}
			})
		},
		methods: {
			getPhoneNumber(e) {
				const that = this
				uni.login({
					provider: 'weixin',
					success(wxCode) {
						if (wxCode.code) {
							that.api.get('getopenid', {
								code: wxCode.code
							}).then(code => {
								that.api.post('get_mobile_phone', {
									code: e.detail.code,
									unionid: code.data.unionid
								}).then(res => {
									if (!res.data.is_registered && res.data.status === 201) {
										that.api.cache("infoData", res.data);
										that.api.cache("token", res.data.token);
										that.gogo()
										return
									}
									that.form.userInfo.mobile_phone = res.data.mobile_phone
								})
							})
						} else {
							console.log('登录失败！' + wxCode.errMsg)
						}
					}
				})


			},
			formSubmit(e) {
				const that = this
				if (this.loginType === '账号') {
					console.log(e);
					that.api.post('users/userpw_login', {
						mobile_phone: e.detail.value.mobile_phone,
						password: e.detail.value.password,
					}).then(res => {
						if (res.data.audit === 201) {
							that.api.cache("infoData", res.data)
							that.api.cache("token", res.data.token)
							that.gogo()
						} else {
							that.go('/pages/login/success')
						}
					})
					return
				}


				if (!this.form.userInfo.mobile_phone) return this.api.msg('请获取微信手机号')
				if (!this.form.userInfo.user_name) return this.api.msg('请填写真实姓名')
				if (!this.form.userInfo.type) return this.api.msg('请选择用户类型')
				if (!this.form.userInfo.w_id) return this.api.msg('请选择仓库')
				if (!this.form.userInfo.class_id && this.form.userInfo.type !== 'warehouse') return this.api.msg('请选择班组')
				uni.login({
					provider: 'weixin',
					success(wxCode) {
						if (wxCode.code) {
							that.api.get('getopenid', {
								code: wxCode.code
							}).then(code => {
								that.form.userInfo.unionid = code.data.unionid
								that.api.post('wxtel', that.form).then(res => {
									if (res.data.audit === 201) {
										that.api.cache("infoData", res.data)
										that.api.cache("token", res.data.token)
										that.gogo()
									} else {
										that.go('/pages/login/success')
									}
								})
							})
						} else {
							console.log('登录失败！' + wxCode.errMsg)
						}
					}
				})

			},
			gogo() {

				const infoData = this.api.cache("infoData")
				if (!infoData) return
				if (infoData.type === 'admin' || infoData.type === 'warehouse') {
					this.rgo('/pages/person/admin/admin')
				} else {
					this.rgo('/pages/home/home')
				}
			}
		}
	}
</script>

<style lang="less">
	.login {
		.w {
			width: 500rpx;
		}


		.border {
			width: 500rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #EEEEEE;
		}

		.mgn-a {
			margin: 0 auto 20rpx;
		}

		.cld8d {
			color: #d8d8d8;
		}

		.selector {

			.selector-li {
				padding: 15rpx 56rpx;
				background: #DDEBFF;
				border: 2rpx solid #3E86F4;
				font-size: 26rpx;
			}

			.left-radius {
				border-radius: 8rpx 0rpx 0rpx 8rpx;
			}

			.right-radius {
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}

			.active {
				background: #3E86F4;
				color: #fff;
			}
		}

		.btn {
			width: 500rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #3E86F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>